<template>
  <div>
    <div>子组件中 {{ name }}</div>
    <hr />
    <!-- @input用来监听input输入 -->
    <input :value="name" @input="writeData" type="text" />
    <br />
    <button @click="childUpdate">在子组件修改</button>
  </div>
</template>
<script>
export default {
  name: "syncChild",
  props: {
    name: {
      type: String,
      required: true
    }
  },
  methods: {
    writeData(e) {
      // e.target.value可以获取到input框中当前的数据
      // console.log(e);
      // console.log(e.target.value);
      // 使用this.$emit("update:dataName", dataValue)  向父组件通信
      this.$emit("update:name", e.target.value);
    },
    childUpdate() {
      this.$emit("update:name", "child");
    }
  }
};
</script>